<template>
  <div class="dispatch-mds-manage">
    <div class="content-main">
      <div class="main-top">
        <div class="search-box">
          <div class="input-box">
            <span>模型：</span>
            <el-input v-model="modelName" placeholder="请输入"></el-input>
          </div>
          <div class="btn-box">
            <el-button type="primary" @click="handleSearchNode">查询</el-button>
            <el-button type="primary" @click="handleSearchRest">重置</el-button>

            <el-button type="primary" @click="handleAddNode">新增</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            border
            :data="state.tableData"
            highlight-current-row
            @current-change="handleChangescheme"
          >
            <el-table-column width="40">
              <template #default="scope">
                <el-radio v-model="state.schemeRadio" :label="scope.row"> <i /></el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="host"
              label="模型计算服务器"
              align="center"
              show-overflow-tooltip
              width="150"
            />
            <el-table-column
              prop="modelPath"
              label="模型包存放地址"
              align="center"
              width="150"
              show-overflow-tooltip
            />
            <el-table-column
              prop="modelClass"
              label="模型计算服务类"
              width="150"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="svcScheme"
              label="服务模式"
              align="center"
              show-overflow-tooltip
              width="150"
            />
            <el-table-column
              prop="svcPort"
              label="服务端口"
              align="center"
              show-overflow-tooltip
              width="150"
            />
            <el-table-column
              prop="svcPath"
              label="服务地址
"
              width="150"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="back"
              label="备注
"
              width="150"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="isConfig"
              label="是否配置完成
"
              align="center"
              width="150"
              show-overflow-tooltip
            >
              <template #default="{ row }"> {{ row.isConfig ? '是' : '否' }} </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="100px">
              <template #default="{ row }">
                <el-button size="mini" style="color: blue" type="text" @click="handleEditNode(row)"
                  >修改</el-button
                >
                <el-button size="mini" style="color: red" type="text" @click="handleDelete(row.id)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="main-down">
        <div class="down-title">
          <span>配置详情</span>
        </div>
        <div class="down-main">
          <el-row>
            <el-col :span="12">
              <span class="node-ip">模型：</span>
              <span>{{ state.schemeRadio.modelName || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="node-ip">模型包存放地址：</span>
              <span>{{ state.schemeRadio.modelPath || '--' }}</span>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <span class="node-ip">模型计算服务：</span>
              <span>{{ state.schemeRadio.modelClass || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="node-ip">服务模式：</span>
              <span>{{ state.schemeRadio.svcScheme || '--' }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="node-ip">服务端口：</span>
              <span>{{ state.schemeRadio.svcPort || '--' }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="node-ip">服务地址：</span>
              <span>{{ state.schemeRadio.svcPath || '--' }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="node-ip">是否已配置完成：</span>
              <span>{{ state.schemeRadio.isConfig ? '否' : '是' }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <node-edit ref="nodeEditRef" @handleGetList="handleSearchNode" :config-list="state.tableData" />
</template>
<script setup>
import nodeEdit from './c-cpns/index.vue'
import { getResourceConfig, deleteResourceConfig } from '@/services/modules/base-config'
import { ref, reactive } from 'vue'

const nodeEditRef = ref(null)
const modelName = ref('')
const state = reactive({
  form: {},
  currentTabs: 0,
  schemeRadio: '',
  tableData: []
})

const handleChangescheme = (item) => {
  if (item) {
    state.schemeRadio = item
  }
}
const handleSearchRest = () => {
  modelName.value = ''
  handleSearchNode()
}
// 查找节点
const handleSearchNode = () => {
  getResourceConfig({
    modelName: modelName.value
  }).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data
      handleChangescheme(state.tableData[0])
    }
  })
}
handleSearchNode()
// 新增节点
const handleAddNode = () => {
  nodeEditRef.value.handleOpenDialog({})
}

function handleEditNode(row) {
  nodeEditRef.value.handleOpenDialog(row)
}
const handleDelete = (id) => {
  ElMessageBox.confirm(`是否删除`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteResourceConfig({
        id
      }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除成功')
          handleSearchNode()
        }
      })
    })
    .catch(() => {})
}
</script>
<style lang="less" scoped>
.dispatch-mds-manage {
  width: 100%;
  height: 100%;
  position: relative;
  .content-main {
    height: 100%;
    .main-top {
      height: 420px;
      .search-box {
        height: 40px;
        display: flex;
        justify-content: space-between;
        margin: 15px 0 0 30px;
        .input-box {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          span {
            color: #797979;
            margin-right: 5px;
            font-size: 14px;
          }
          .el-input {
            width: 200px;
          }
        }
        .time-box {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          span {
            color: #797979;
            margin-right: 5px;
            font-size: 12px;
          }
          :deep(.el-range-editor.el-input__wrapper) {
            width: 200px;
          }
        }
        .btn-box {
          margin-right: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .table-box {
        height: calc(100% - 40px);
        margin-top: 15px;
        background: white;
        :deep(.el-radio__label) {
          display: none;
        }

        :deep(.el-table) {
          height: calc(100% - 50px);
        }
        .page {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .main-down {
      height: 500px;
      padding: 10px;
      .down-title {
        height: 35px;
        font-size: var(--content-fontsize);
        display: flex;
        align-items: center;
        margin: 10px 0 20px 10px;
        span:nth-of-type(1) {
          color: #0154db;
        }
        span:nth-of-type(2) {
          color: black;
        }
      }
      .down-main {
        margin-left: 25px;
        .el-row {
          margin-bottom: 20px;
        }
        .node-ip {
          color: #797979;
          font-size: 16px;
        }
        .main-item {
          margin-top: 5px;
          .item-title {
            display: flex;
            .title-icon {
              margin-right: 2px;
              margin-left: 20px;
              img {
                width: 20px;
                height: 20px;
              }
            }
            .title-name {
              margin-right: 15px;
              span {
                color: #797979;
                font-size: 12px;
              }
            }
            .progress-box {
              width: 150px;
              margin-left: 50px;
            }
            .title-word {
              margin-right: 15px;
              span {
                color: #0054db;
                font-size: 12px;
              }
            }
            .title {
              span {
                color: black;
                font-size: 12px;
              }
            }
          }
          .item-detail {
            height: 100%;
            .ul-box {
              // overflow-y: auto;
              .li-box {
                display: flex;
                justify-content: space-between;
                margin: 15px 0 0 50px;
                .li-item {
                  display: flex;
                  font-size: 12px;
                  .li-icon {
                    margin-right: 5px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .li-name {
                    span {
                      color: black;
                    }
                  }
                }
                .li-status {
                  display: flex;
                  margin-right: 100px;
                  .status-icon {
                    margin-right: 5px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .status-name {
                    span {
                      color: black;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
